@border-color: #505050;

.container {
  margin: @spacing 0.5 * @spacing;
  border: 1px solid @border-color;
  background-color: #fff;
}

.user_wrapper {
  display: flex;
  align-items: center;
  padding: @spacing;
  border-bottom: 1px solid @border-color;
  .name {
    font-weight: bold;
    margin-left: @spacing;
    margin-bottom: 0;
  }
}

.list {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #fff;
}

.item {
  .title {
    font-weight: bold;
  }

  .html_content {
    word-wrap: break-word;
  }
}

.header {
  display: flex;
  justify-content: flex-end;
  color: #666;
  overflow: hidden;

  .date {
    font-size: 14px;
    line-height: 22px;
  }

  .ctrs {
    &:extend(.transition);
    width: 0;
    white-space: nowrap;

    .btn {
      margin-left: @spacing;
      font-size: 16px;
      line-height: 22px;
      color: @theme-color;
      cursor: pointer;
    }
  }
}

// 状态相关
.item:hover .ctrs {
  width: 2 * (16px + @spacing);
}

.item_doing {
  background-color: #fff7d1;
}

.item_done {
  background-color: #e4f9e0;
}

.item_add {
  background-color: #eee;
  text-align: center;
  font-size: 200%;
  cursor: pointer;
}

.item,
.item_add {
  &:extend(.transition);
  margin: @spacing;
  padding: @spacing;
  border-radius: 5px;

  &:hover {
    box-shadow: 0 2px 5px 0 #aaa;
  }
}
